<template>
  <div class="uploadFile">
      <a-upload
    name="iFile"
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    :action="action"
    :before-upload="beforeUpload"
    :headers="headerObj"
    :file-list="imgFileList"
    :customRequest="customRequest"
    @change="handleChange"
  >
    <img v-if="imageUrl" :src="imageUrl" style="height:102px;width:102px;" alt="avatar" />
    <div v-else>
      <a-icon :type="loading ? 'loading' : 'plus'" />
      <div class="ant-upload-text">
        上传图片
      </div>
    </div>
  </a-upload>
  </div>
</template>
<script>
import { image } from '@/api/upload'

export default {
  components: {},
  props:{
    accept:{
      type : String,
      default:()=>{
      // acceptVideo:'.MP4, .wmv, .AVI, .ASF 视频格式'
        return '.png, .jpeg, .gif, .jpg, .bmp, .webp' //图片格式
      },
    },
    fileList:{
      type : Array,
      default:()=>{
        return []
      },
    },
    disabled:{
      type : Boolean,
       default:()=>{
        return false
      },
    },
    limit:{
      type : Number,
      default:()=>{
        return 1
      }
    }
  },
  data() {
    return {
      loading: false,
      imageUrl: '',
      headerObj:{
          'Access-Token' : localStorage.getItem('Access-Token').substring(1,localStorage.getItem('Access-Token').length-1)
      },
      action:window.localStorage.baseUrl+'/upload/image',
      imgFileList:[]
    }
  },
  methods: {
    customRequest(file){
        console.log('成功了');
        console.log(file);
        let formData = new FormData()
        formData.append('iFile',file.file)
        image(formData).then(res=>{
          console.log(res);
          if (res.status) {
             this.$message.success('图片上传成功')
             this.imageUrl = res.data.fileInfo.preview_url
              let obj = {
                uid : res.data.fileInfo.file_id,
                url : res.data.fileInfo.preview_url,
                name: res.data.fileInfo.file_name,
                thumbUrl :  res.data.fileInfo.file_name,
             }
             console.log(obj);
             this.imgFileList.push(obj)
            console.log(this.imgFileList);

          }
        })
        

    },
    handleChange(info) {
     
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },

  },
   
}
</script>
<style lang="less" scoped>
  .hide {
    /deep/.el-upload--picture-card {
      		display: none;
    }
  }
/deep/ .el-upload-list__item{
  position: relative;
}
/deep/ .el-upload-list__item img {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;

}
/deep/ .el-upload-list__item-name{
  display: block;
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%,-50%);
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>
